# The `asChild` prop

`twc` offers a flexible way to reuse your classes on another component using the `asChild` prop. This prop allows you to replace the default component with a custom child element while keeping the defined classes.

## Usage

A good example is an `Anchor` component that you may want to reuse but with a `next/link` component. Let's see how you can achieve this using `asChild`:

Take an `Anchor` component:

```ts filename="components/anchor.ts"
import { twc } from "react-twc";

export const Anchor = twc.a`underline text-blue-800 hover:text-blue-900`;
```

You can reuse the style for a `next/link` using `asChild` prop:

```tsx {6} /asChild/
import NextLink from "next/link";
import { Anchor } from "./components/anchor";

export default () => (
  <Anchor asChild>
    <NextLink href="/">Go home</NextLink>
  </Anchor>,
);
```

To learn more about `asChild`, read [Radix documentation](https://www.radix-ui.com/primitives/docs/guides/composition#changing-the-element-type). `twc` uses [Slot component](https://www.radix-ui.com/primitives/docs/utilities/slot) internally to implement `asChild` prop.
